// 浏览器前缀
.c3p(@key,@value){
  -webkit-@{key}:@value;
  -moz-@{key}:@value;
  -ms-@{key}:@value;
  -o-@{key}:@value;
  @{key}:@value;
}

.clear(){
  &:before,&:after{
    content: '';
    display: block;
    float: none;
    clear: both;
  }
}

.box(w,@w:1200px){width:@w;margin-left:auto;margin-right:auto;}
.box(m,@mlr:10px){width:auto;margin-left:@mlr;margin-right:@mlr;}
.box(p,@plr:10px){width:auto;margin-left:auto;margin-right:auto;padding-left:@plr;padding-right:@plr;}
//传统的float布局 之 圣杯布局；原理好用，但平A较少，原理记之足以
.shengbei(@lname:left;@cname:main;@rname:right;@lw:20px;@rw:6em;){
  position: relative;
  .@{cname}{margin-left:@lw;margin-right:@rw;}
  .@{lname}{position: absolute;top:0;bottom:0;left:0;width:@lw;}
  .@{rname}{position: absolute;top:0;bottom:0;right:0;width:@rw;}
}
@import (less) 'submolle/layout-position.less';
// 由圣杯布局衍生出的fixed的全局布局模块，
// 其中包括fullPage布局，其命名方式修改为洛书命名。
// 也包括常用的fixed和absolute方法
.fixed-placehoder(@d:9;@h:100px){
  & when ( @d = 9 ){.fixed-9();}
  & when ( @d = 1 ){.fixed-1();}
  height:@h;
  &{&+.placeholder{height:@h;}}
}// 常用的定顶定底操作
@import (less) 'submolle/layout-display.less';
@import (less) 'submolle/layout-align.less';
@import (less) 'submolle/layout-gridSys.less';
.HorizontalFlowLayout(){
  .overflow-hidden{overflow: hidden;}
  .HorizontalLayout{
    overflow-x:auto;
    .Flowbox{
      white-space:nowrap;
      overflow-y:hidden;
    }
  }
}
@import (less) 'submolle/layout-flexSupply.less';

.test(layout){
  // 来自position.less模块
  // .abs{.abs-9()};
  // .fix{.fixed-1()};
  // .fullPageLayout();
    // 以下一般不考虑使用
    // .position-direction(T);
  // 来自display.less模块
  // .dis-ib{.dis-ib(@ie:10);}
  // .dis-flex{.dis-flex();}
  // .display(@ie:10;@Prefix:~'-p-';@Suffix:~'-s-test';);
  // 来自align.less模块
  // .align(@Prefix:~'-p-',@Suffix:~'-s-test');
  // .flex-align(@Prefix:~'-p-',@Suffix:~'-s-test');
    // 以下一般不考虑使用
    // .block-align(@t:center;@v:middle){
    // .mainaxis(s);
    // .crossaxis(s);
    // .flex-align(@Prefix:~'-p-',@Suffix:~'-s');
  // 来自gridSys.less模块
  // .gridLayoutSys(@ie:10,@Col:3,@Gshow:20,@Gcale:20px,@Prefix:~'-',@Suffix:~'');
    // 以下一般不考虑使用
    // .row-type(@ie,@Prefix,@Suffix);
    // .col(@Col,@Prefix,@Suffix);
    // .groove(@ie,@Gshow,@Gcale,@Prefix,@Suffix);
  // 来自本模块
  // .clear();
  // .box(w,@w:1200px);
  // .box(m,@mlr:10px);
  // .box(p,@plr:10px);
  // .fixed-placehoder(@d:9;@h:100px);
  // .HorizontalFlowLayout();
}// test同时也是该模块可调用的方法；
// .test(layout);

.def(layout){
  // .test(pos);
  // .test(display);
  // .test(align);
  // .test(gridSys);
  // .test(flex);//该模块暂不用于生产
  header,.header
  ,footer,.footer
  ,hgroup,.hgroup
  ,.container-full,.container-response
  ,.container,.container-reverse-response
  ,.row{
    .clear();
  }
  .HorizontalFlowLayout();
}
.def(layout);

// 部分模块跳级直升3.0
// 3.0以上版本部分模块设定.def(模块名)方法用于导入时默认调用，
// 节约常规调用时间

// 2020-7-20
// 重整clear()，并添加到def()
// 本应支持{float=>rowcol},{inlineblock=>rowcol},{flex=>rowcol}三个系统，
// 目前测试比较完善的只有{float=>rowcol}系统
// 修改box部分
// 提示圣杯布局原理常用但api不常用
// 删除position-fixed部分，使用fullPageLayout模块
// 删除position-abs部分
// 增加常用的header-fixed和footer-fixed

// 2020-7-26修改为3.1版本，
// 将栅格系统分离为['offestPushPull','gridLayoutSys','ilblockLayoutSys','flexLayoutSys']四个模块
// 目前前三个部分通过自我测试，现编写最后一个模块

// 2020-7-29大刀阔斧修改为[display,width,groove,align]四个原子化的模块
// 其中又分离出[row-type].push[width,groove]为新的gridSys模块
// 现在有[position,display,align,gridSys,flexSupply]五个模块被引入，具体可以查看test()内可调用的方法；
// 本模块可用方法较多，生产中多有调用的空间